<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">五子棋对战</div>


<!-- 登录界面的对话框 -->
    <div class="container">
        <div>
            <!-- 这个表示一行 -->
            <div id="screen"></div>
            <!-- 这是另一行 -->
            <div id="match-button">开始匹配</div>  
        </div>
    </div>


<script src="./js/jquery-3.7.1.js"></script>
<script>
    $.ajax({
      type: 'get',
      url: '/userInfo',
      success: function(body){
        if(body.username){
            let screen = document.querySelector('#screen');
            screen.innerHTML = '玩家: ' + body.username + " 分数: " + body.score 
                    + "<br> 比赛场次: " + body.totalCount + " 获胜场数: " + body.winCount;

        }else{
             alert("获取用户信息失败!");
             location.assign('/login.html');
        }
      },
      error: function(){
        alert("获取用户信息失败!");
      }
    });
    //可以动态获取当前运行程序的端口
    let webSocket = new WebSocket('ws://'+location.host+'/findMatch');
    let button = document.querySelector('#match-button');
    webSocket.onopen = function(){
        console.log('连接成功');
    }
    webSocket.onmessage = function(e){

        let response = JSON.parse(e.data);
        console.log('接收消息：'+e.data);
        
        if(!response.ok){
            console.log('错误：'+response.reason);
        }else if(response.message == 'startMatch'){
            button.innerHTML = '匹配中...(点击停止)';
        }else if(response.message == 'stopMatch'){
            button.innerHTML = '开始匹配';
        }else if(response.message == 'matchSuccess'){
          console.log('匹配成功，进入房间');
          alert('进入匹配房间');
          //由于页面类似栈结构，当点击回退的时候会返回到匹配页面，逻辑混乱
          // location.assign('/game_room.html');
          //与assign作用相同，不过replace会取代当前页面，不会入栈，点击回退可以回到主页
          location.replace('/game_room.html');
        }else if(response.message == 'repeatLogin'){
            console.log('禁止重复登入');
            alert('禁止重复登入');
            location.assign('/login.html');
            
        }else{
            console.log('收到了非法响应'+ response.message);
        }
    }
    webSocket.onerror = function(){
        console.log('出现错误');
    }
    webSocket.onclose = function(){
        console.log('关闭连接');
        //这里是放多开操作，但是进入游戏时，连接也会断开，可能会跳转到主页，而不是游戏页面
        //最好操作时，后端返回关闭消息原因，如果因为多开在跳转到主页
        //  alert('当前连接已关闭');
        console.log('当前连接已经关闭');
        //location.assign('/login.html');
    }
    window.onbeforeunload = function(){
        webSocket.close();
    }
   

    button.onclick = function(){
        //验证是否连接成功
        if(webSocket.readyState == webSocket.OPEN){
            //触发匹配/停止匹配
            if(button.innerHTML == '开始匹配'){
                webSocket.send(JSON.stringify({
                    message: 'startMatch'
                }));
            }else if(button.innerHTML == '匹配中...(点击停止)'){
                alert('停止匹配')
                webSocket.send(JSON.stringify({
                    message: 'stopMatch'
                }));
            }else{
                 console.log(button.innerHTML);
            }
        }else{
            alert('当前连接已经断开');
            //重新进行登入
            location.assign('/login.html');
        }
    }
    



</script>
</body>

</html>